<template>
  <div class="app-container clearfix">
    <div class="filter">
      23424
    </div>
    <div class="broker">
        <div class="broker-item" v-for="(broker,index) in brokerlist" :key="index" @click="onBrokerDetailJump(broker)">
          <div class="broker-item-icon">
            <img :src="broker.icon" />

          </div>
          <div>{{broker.title}}</div>
        </div>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getHost} from '@/utils/socket' // secondary package based on el-pagination
import {getList} from '@/api/position/broker' 

export default {
  name: 'financeDashboard',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      
      socket:"",
      tableKey: 0,
      brokerlist: [],
      kbarChart:null,
      total: 0,
      listLoading: false,
      connected:"loading",
      filterForm: {
        start: 1,
        perpage: 18,
        title: undefined
      }
    }
  },
  mounted(){
  },
  created() {
    this.getList()
  },
  destroyed(){
  },
  methods: {
    getList:function(){
      let _this = this
      getList(_this.filterForm).then(res=>{
        if(res.status == 200){
          console.log(res.data.list)
          _this.brokerlist = res.data.list;
          _this.feelingsTotal = res.data.total
        }
      });
    },
    onBrokerDetailJump:function(broker){
        this.$router.push({ path: 'broker-detail', query: {
          "brokerID":broker.ID
        } })
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    }
  }
}
</script>
<style>
.filter { float: left; width: 200px; min-height: 600px; }
.broker { float: left; width: 800px; }
.broker-item { float: left; width: 200px; height: 200px; margin-right: 25px; }
.broker-item-icon { width:200px; height:150px; }
.broker-item-icon img { width:100%; height:100%; border-radius: 10px; }
</style>